import React, { memo } from 'react'
import { LongForWrapper } from './style'
import SectionHeader from '@/components/section-header'
import LongForItem from '@/components/long-for-item'
import ScrollView from '@/components/scroll-view'

const HomeLongFor = memo((props) => {
  const { infoData } = props

  return (
    <LongForWrapper>
      <SectionHeader title={infoData.title} subTitle={infoData.subtitle} />
      <div className="longfor-list">
        <ScrollView>
          {infoData.list?.map((item) => {
            return <LongForItem itemData={item} key={item.city} />
          })}
        </ScrollView>
      </div>
    </LongForWrapper>
  )
})

export default HomeLongFor
